<template>
  <div class="passwordManagement p-[30px]">
    <div class="flex justify-between">
      <span class="font-bold">设置密保</span
      ><span class="name"
        ><van-icon
          name="location-o"
          class="mr-[5px]"
        />当前位置：账户安全-安全设置-设置密保</span
      >
    </div>
    <el-divider />
    <div class="mt-[10px] flex flex-col justify-center">
      <div class="div-top p-[30px]">
        <div class="flex items-center">
          <img class="block w-[120px]" alt="Vue logo" src="~@/assets/2.png" />
          <div class="flex flex-col ml-[20px]">
            <span class="text-[20px]">设置密保</span>
            <span
              >欢迎您!超级管理员请设置您的密保问题和答案，保存成功后，可以使用密保找回密码和登录验证等功能</span
            >
          </div>
        </div>
      </div>
      <div class="mt-[30px] flex justify-center">
        <el-form
          ref="ruleFormRef"
          style="width: 700px; text-align: center"
          :model="formData"
          :rules="rules"
          label-width="auto"
          size="default"
        >
          <el-form-item
            label="密保问题："
            prop="type"
            placeholder="请选择密保问题"
          >
            <el-select v-model="formData.type" style="width: 350px">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label="自定义问题："
            prop="question"
            placeholder="请输入自定义问题"
          >
            <el-input v-model="formData.question" style="width: 350px" />
            <span class="text-[10px] ml-[10px] gray">
              长度2-50个中文、英文或数字
            </span>
          </el-form-item>
          <el-form-item
            label="问题答案："
            prop="answer"
            placeholder="请输入问题答案"
          >
            <el-input v-model="formData.answer" style="width: 350px" />
            <span class="text-[10px] ml-[10px] gray">
              长度2-50个中文、英文或数字
            </span>
          </el-form-item>
          <el-button type="primary" @click="submitForm(ruleFormRef)">
            保存
          </el-button>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
import type { FormInstance, FormRules, ElMessage } from "element-plus";
interface RuleForm {
  type: string;
  question: string;
  answer: string;
}
const options = reactive([{ value: "1", label: "自定义问题" }]);
const ruleFormRef = ref<FormInstance>();
const formData = ref<RuleForm>({
  type: "1",
  question: "",
  answer: ""
});
const rules = reactive<FormRules<RuleForm>>({
  question: [
    { required: true, message: "请输入自定义问题", trigger: "blur" },
    { min: 2, max: 50, message: "长度最小2位最大50位", trigger: "blur" }
  ],
  answer: [
    { required: true, message: "请输入问题答案", trigger: "blur" },
    { min: 2, max: 50, message: "长度最小2位最大50位", trigger: "blur" }
  ]
});
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      ElMessage.success("保存成功");
    } else {
      // ElMessage.error("保存失败，请重试");
    }
  });
};
</script>

<style lang="scss" scoped>
.passwordManagement {
  height: 100%;
  background-color: var(--color-main-background-secondary);
  .name {
    color: var(--color-main-text);
  }
  .div-top {
    width: 100%;
    background-color: #f7f9ff;
  }
}
.el-alert {
  padding: 0 0 0 10px;
}
.gray {
  color: var(--color-main-text);
}
</style>
